import { useSelector, useDispatch } from "react-redux";
import { useEffect, useRef } from "react";
import SpeedDashBoard from "../../components/SpeedDashBoard";
import "./index.css";

export default function Echarts() {
  const speedData = {
    series: [
      {
        type: "gauge",
        axisLine: {
          lineStyle: {
            width: 40,
            color: [
              [0.5, "#67e0e3"],
              [0.7, "#37a2da"],
              [1, "#fd666d"],
            ],
          },
        },
        axisTick: {
          distance: -50,
          length: 10,
          lineStyle: {
            color: "#fff",
            width: 1,
          },
        },
        splitLine: {
          distance: -55,
          length: 15,
          lineStyle: {
            color: "#fff",
            width: 3,
          },
        },
        axisLabel: {
          color: "#fff",
          distance: 6,
          fontSize: 18,
        },
        detail: {
          valueAnimation: true,
          // formatter: "{value} km/h",
          formatter: "km/h",
          color: "#fff",
          fontSize: "16px",
        },
        anchor: {
          show: true,
          size: 20,
          itemStyle: {
            borderColor: "#d1d1d1",
            borderWidth: 2,
            color: "#d1d1d1",
          },
        },
        pointer: {
          offsetCenter: [0, "20%"],
          icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
          length: "115%",
          width: "10px",
          itemStyle: {
            color: "#d1d1d1",
          },
        },
        title: {
          fontSize: "16px",
          color: "#fff",
          offsetCenter: ["0%", "-40%"],
        },
        data: [
          {
            value: 0,
            name: "速度",
          },
        ],
      },
    ],
  };
  const rotateSpeedData = {
    series: [
      {
        type: "gauge",
        min: -10,
        max: 10,
        splitNumber: 10,
        axisLine: {
          lineStyle: {
            width: 20,
            color: [
              [0.75, "#67e0e3"],
              [0.85, "#37a2da"],
              [1, "#fd666d"],
            ],
          },
        },
        axisTick: {
          distance: -25,
          length: 5,
          lineStyle: {
            color: "#fff",
            width: 1,
          },
        },
        splitLine: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: "#fff",
            width: 2,
          },
        },
        axisLabel: {
          color: "#fff",
          distance: 0,
          fontSize: 13,
        },
        detail: {
          valueAnimation: true,
          formatter: "x1000r/m",
          color: "#fff",
          fontSize: "15px",
        },
        anchor: {
          show: true,
          size: 10,
          itemStyle: {
            borderColor: "#d1d1d1",
            borderWidth: 2,
            color: "#d1d1d1",
          },
        },
        pointer: {
          offsetCenter: [0, "20%"],
          icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z",
          length: "115%",
          itemStyle: {
            color: "#d1d1d1",
          },
        },
        title: {
          fontSize: "16px",
          color: "#fff",
        },
        data: [
          {
            value: 0,
            name: "M1转速",
            title: {
              offsetCenter: ["0%", "-40%"],
            },
          },
        ],
      },
    ],
  };

  return (
    <div className="dashboardCollection">
      <SpeedDashBoard
        isRotateBoard={true}
        speedData={rotateSpeedData}
        className="rotateBoard"
      />
      <SpeedDashBoard
        isRotateBoard={false}
        speedData={speedData}
        className="speedBoard"
      />
      <SpeedDashBoard
        isRotateBoard={true}
        speedData={rotateSpeedData}
        className="rotateBoard"
      />
    </div>
  );
}
